.stats-views {
	overflow-x: auto;
}

.stats-views__months {
	.is-loading & {
		display: none;
	}
	td,
	th {
		padding: 6px;
		text-align: center;
		cursor: pointer;
		user-select: none;
		font-weight: normal;
		font-size: $font-body-extra-small;
		text-transform: uppercase;
		letter-spacing: 0.1em;
	}

	th {
		font-size: $font-body-extra-small;
		color: var( --color-neutral-40 );
	}
}

.stats-views__month,
.stats-views__key-item {
	background-color: none;

	&.is-year {
		background: none;
		text-align: left;
		font-size: $font-body-extra-small;
		color: var( --color-neutral-40 );
	}

	&.level-0 {
		background-color: var( --color-neutral-0 );
	}

	&.level-1 {
		background-color: var( --color-primary-5 );
	}

	&.level-2 {
		background-color: var( --color-primary-10 );
	}

	&.level-3 {
		background-color: var( --color-primary-light );
		color: var( --color-text-inverted );
	}

	&.level-4 {
		background-color: var( --color-primary );
		color: var( --color-text-inverted );
	}

	&.level-5 {
		background-color: var( --color-primary-dark );
		color: var( --color-text-inverted );
	}
}

.segmented-control.stats-views__month-control {
	max-width: 280px;
	margin: 0 auto 10px;
}

.stats-views__key-container {
	@include clear-fix;
	padding-top: 10px;
	float: right;

	@include breakpoint-deprecated( '<960px' ) {
		float: none;
		margin: 0 auto;
		margin-bottom: 25px;
		text-align: center;
	}
}

.stats-views__key-label,
.stats-views__key {
	display: inline-block;
}

.stats-views__key-label {
	font-size: $font-body-extra-small;
	color: var( --color-neutral );
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.stats-views__key {
	margin: 0;
	list-style-type: none;
	padding: 2px 9px 0 5px;

	.stats-views__key-item {
		width: 10px;
		height: 10px;
		float: left;
		margin-left: 3px;
	}
}
